<template>
  <div>
    <h2>效果一: 显示TODO列表时, 已完成的TODO为绿色</h2>
    <List :todos="todos">
      <!-- 书写template -->
      <template slot-scope="todo">
        <!-- <span>{{todo.todo}}</span> -->
        <h5 :style="{color:todo.todo.isComplete?'green':'black'}">{{todo.todo.text}}</h5>
      </template>
    </List>
    <List :todos="todos">
      <!-- 书写template -->
      <template slot-scope="todo">
        <a :style="{color:todo.todo.isComplete?'green':'black'}">{{todo.todo.text}}</a>
      </template>
    </List>
    <hr />
    <h2>效果二: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配</h2>
    <List1 :data="todos">
      <template slot-scope="{row,index}">
        <!-- <span>{{index}}</span> -->
        <h1 :style="{color:row.isComplete?'green':'hotpink'}">索引值{{index}}---------{{row.text}}</h1>
      </template>
    </List1>
  </div>
</template>

<script type="text/ecmascript-6">
//子组件
import List from './List'
import List1 from './List1'
export default {
  name: 'ScopeSlotTest',
  data () {
    return {
      todos: [
        { id: 1, text: 'AAA', isComplete: false },
        { id: 2, text: 'BBB', isComplete: true },
        { id: 3, text: 'CCC', isComplete: false },
        { id: 4, text: 'DDD', isComplete: false },
      ]
    }
  },

  components: {
    List,
    List1
  }
}
</script>
